<template>
  <div class="box">
    <div class="button sm">
      <input type="checkbox" class="check" />
      <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
    </div>
    <div class="button sm">
      <input type="checkbox" class="check" />
      <i class="fa fa-bell-o" aria-hidden="true"></i>
    </div>
    <div class="button sm">
      <input type="checkbox" class="check" />
      <i class="fa fa-cogs" aria-hidden="true"></i>
    </div>
    <div class="button md">Success!</div>
    <div class="button lg">Click me</div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.box {
  background: linear-gradient(30deg, #fff, #999);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
  .button {
    position: relative;
    color: #555;
    background: linear-gradient(50deg, #fff, #999);
    border-radius: 80px;
    text-align: center;
    margin: 10px;
    font-size: 30px;
    box-shadow: 0.5px -0.5px 1px 1px #fff, -1px 1px 1px 1px #999,
      -5px 8px 15px 1px #999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    user-select: none;
  }

  .button.sm {
    width: 80px;
    height: 80px;
  }

  .button.md {
    width: 240px;
    height: 80px;
  }

  .button.lg {
    width: 400px;
    height: 80px;
  }

  .button:hover {
    cursor: pointer;
  }

  .button:active {
    font-size: 26px;
    box-shadow: 0.5px -0.5px 1px 0.5px #fff, -1px 1px 1px 0.5px #999,
      -1px 4px 10px 1px #999;
  }

  .check {
    position: absolute;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
  }

  .check:checked ~ i {
    color: #1eabbe;
  }
}
</style>
